<template>
  <div>
    <!-- 背景图 -->
    <div class="title_img">
      <img class="wimg" :src="typeInfo.bg_img" alt />
    </div>

    <!-- 内容 -->
    <div class="w absolute">
      <!-- 商品title-->
      <div class="four_btn">
        <div style="position: absolute;left: 0;top: 0.5rem; z-index: 99;text-align: center;width: 100%;">
          <div v-show="!show_top" class="four_img" :style="$route.query.id?'top:2.3rem':'top:0'">
            <ul class="flex-ar-center nav_box">
              <li v-for="(item) in nav" :key="item.id">
                <img class="wimg" :src="item.icon" alt @click="classskip(item.id)" />
              </li>
            </ul>
          </div>
          <p class="pp" style="margin-top:0.5rem;font-size: 0.4rem;font-weight: bold;">{{typeInfo.type_name}}</p>
          <span style="font-size: 0.2rem;
          line-height: 0.7rem;">{{typeInfo.subtitle}}</span>
        </div>
        <div class="title_box"
          :style="{background:(typeInfo.subject_color?typeInfo.subject_color:'rgb(129, 211, 185)'),opacity:opacity,}">

        </div>
      </div>
      <!-- 商品列表 -->
      <div class="list" :style="$route.query.lastpath=='/home'?'margin-top:0':'margin-top: 2rem'">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul class="list_box">
              <li class="flex-be-center list_box_item" v-for="(item) in list_box" :key="item.index"
                @click="navto(item.goods_id)">
                <!-- 左侧图片 -->
                <div class="flex-be-cneter list_box_item_lf">
                  <img class="wimg" :src="item.goods_icon" alt />
                </div>
                <!-- 右侧信息 -->
                <div class="flex-co-center list_box_item_rg">
                  <div class="list_box_item_rg_title">
                    <p class="p-two">{{item.goods_name}}</p>
                    <p>
                      <span class="rg_title_one">销量 {{item.sale_num}} 笔</span>
                      <span>库存 {{item.goods_num}}</span>
                    </p>
                  </div>

                  <p class="price_con">
                    <span class="price">¥ {{item.goods_price}}</span>
                    <span>
                      运费
                      <em>0.00</em>
                      元
                    </span>
                  </p>
                  <div class="flex-be-center list_img_box">
                    <!-- <van-swipe :autoplay="0" :show-indicators="false" class="van_spier">
                      <van-swipe-item v-for="(item2,index2) in item.goods_relevance2" :key="index2" :class="index2==item.goods_relevance.length-1? 'active':'' " class="van_slider">
                        <img class="wimg" :src="item2" alt="">
                        <div v-if="index2==item.goods_relevance.length-1"></div>
                        <span v-if="index2==item.goods_relevance.length-1">MORE +</span>
                      </van-swipe-item>
                    </van-swipe>-->
                    <div v-for="(item2,index2) in item.goods_relevance" :key="index2"
                      :class="index2==item.goods_relevance.length-1? 'active':'' " class="slider_item">
                      <img class="wimg" :src="item2.goods_icon" @click="click1($event,item2.goods_id)" alt />
                      <div v-if="index2==item.goods_relevance.length-1"></div>
                      <span v-if="index2==item.goods_relevance.length-1">MORE +</span>
                    </div>
                    <!-- <div>
                      <img class="wimg" :src="banner.img1.src" alt="">
                    </div>
                    <div>
                      <img class="wimg" :src="banner.img1.src" alt="">
                      <span>MORE +</span>
                    </div>-->
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>

      </div>
    </div>
  </div>
</template>
<style lang="" scoped>
  .title_img {
    height: 4rem;
    overflow: hidden;
  }

  .title_box {
    /* width:6.9rem; */
    height: 4rem;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.24rem;
    font-weight: 400;
    color: #666666;
    /* margin-top: -1.57rem; */
    position: relative;
    margin-bottom: 0.71rem;
  }

  .title_box p {
    font-size: 0.36rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.18rem;
  }

  .list {
    margin-bottom: 1.44rem;
    background: white;
  }

  /* 列表 */
  .list_box_item {
    height: 100%;
    align-items: flex-start;
    margin-bottom: 0.5rem;
  }

  .list_box_item_lf {
    width: 3.4rem;
  }

  .list_box_item_lf img {
    max-height: 4.3rem;
  }

  .list_box_item_rg {
    flex: 1;
    height: 100%;
    max-height: 4.3rem;
    padding-left: 0.36rem;
  }

  .list_box_item_rg .price_con {
    margin-bottom: 0.67rem;
  }

  .list_box_item_rg_title p:nth-child(1) {
    font-size: 0.26rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.19rem;
    padding-top: 0.3rem;
    line-height: 0.36rem;
    height: 0.72rem;
  }

  .list_box_item_rg_title p:nth-child(2) {
    /* width:0.7rem;
height:0.18rem; */
    height: 0.18rem;
    font-size: 0.18rem;
    /* font-family:Source Han Sans SC; */
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-bottom: 0.99rem;
  }

  .list_box_item_rg_title p:nth-child(2) .rg_title_one {
    padding-right: 0.59rem;
  }

  .price_con {
    font-size: 0.18rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .price_con .price {
    font-size: 0.36rem;
    font-weight: bold;
    color: rgba(216, 30, 6, 1);
    padding-right: 0.24rem;
  }

  .price_con em {
    color: rgba(216, 30, 6, 1);
  }

  .list_img_box {
    width: 3.2rem;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .list_img_box>div {
    width: 0.98rem;
    /* height: 0.98rem; */
  }

  .list_img_box>div img {
    width: 0.98rem;
    max-height: 0.98rem;
  }

  .list_img_box .active {
    position: relative;
  }

  .list_img_box .active div {
    background: rgba(0, 0, 0, 1);
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    width: 0.98rem;
    height: 0.98rem;
  }

  .list_img_box .active span {
    position: absolute;
    top: 0.42rem;
    left: 0;
    color: #ffffff;
    font-size: 0.24rem;
    transform: scale(0.83, 0.83);
  }

  .list_box>li:nth-last-child(1) {
    /* margin-bottom: 2rem; */
  }

  .van_spier {
    border: 1px solid red;
  }

  .wimg.top {
    width: 76%;
    padding: 10px;
  }

  .nav {
    margin-bottom: 1.75rem;
    background: transparent;
    /*     margin: 0.39rem 0;
    margin-top: -1.57rem;
    margin-bottom: 1.75rem; */
    background: transparent;
  }

  .nav_box li {
    padding: 0 0.2rem 0;
  }

  .absolute {
    position: absolute;
    left: 0;
    top: 3rem;
    margin: 0 2%;
  }

  .pp {
    margin-top: 0.7rem;
  }
  .four_btn{
    margin: 0 0.6rem;
    height: 2.5rem;
    position: relative;
  }
  .four_btn div.title_box{
    height:100%
  }
  .four_btn>div:first-child{
    width: 100%;
  }
  .four_img{
    position: absolute;
    top: 2.3rem;
  }
</style>
<script>
  import getData from "../../assets/js/axios.js";
  export default {
    data() {
      return {
        // 无限滚动数据
        typeInfo: {},
        loading: false,
        finished: false,
        refreshing: false,
        alllist: "",
        id: null,
        page: 1,
        //结束
        banner: {
          img1: {
            url: "./ac",
            src: require("../../assets/img/index/banner.jpg")
          }
        },
        //列表展示
        list_box: [],

        //顶部
        nav: [],
        show_top: this.$route.query.id,
        opacity: 0.5,
        top:false
        // img1: {
        //   id: 12,
        //   sales: "328笔",
        //   stock: 800,
        //   detail: "DW潮流新品优选推荐~",
        //   number: 53858,
        //   src: require("../../assets/img/index/tuijian.png"),
        //   price: "198.00",
        //   freight: "120元",
        //   smaill: {
        //     img1: require("../../assets/img/index/1.png"),
        //     img2: require("../../assets/img/index/2.png"),
        //     img3: require("../../assets/img/index/3.png"),
        //   }
        // },
        // img2: {
        //   id: 21,
        //   sales: "328笔",
        //   stock: 800,
        //   detail: "DW潮流新品优选推荐~",
        //   number: 53858,
        //   src: require("../../assets/img/index/tuijian.png"),
        //   price: "198.00",
        //   freight: "120元",
        //   smaill: {
        //     img1: require("../../assets/img/index/1.png"),
        //     img2: require("../../assets/img/index/2.png"),
        //     img3: require("../../assets/img/index/3.png"),
        //   }
        // },
        // img3: {
        //   id: 31,
        //   sales: "328笔",
        //   stock: 800,
        //   detail: "DW潮流新品优选推荐~",
        //   number: 53858,
        //   src: require("../../assets/img/index/tuijian.png"),
        //   price: "198.00",
        //   freight: "120元",
        //   smaill: {
        //     img1: require("../../assets/img/index/1.png"),
        //     img2: require("../../assets/img/index/2.png"),
        //     img3: require("../../assets/img/index/3.png"),
        //   }
        // },
      };
    },
    computed: {
    },
    mounted() {
      console.log(this.$route)
      getData
        .classType()
        .then(res => {
          console.log(res.data, "分类数据");
          this.nav = res.data.data;
        })
        .catch(err => { });
      // console.log(this.$route.query, this.$route.params, "route");
    },

    methods: {
      click1(e, item) {
        this.$router.push({ name: "Goods", query: { id: item } });
        e.stopPropagation();
      },
      /*       sendid(){
            getData.classList({
            "page": this.page,
            "goods_category": this.$route.query.id
            }).then(res => {
              console.log(res.data,"fenlei")
              this.typeInfo = res.data.data.goods_type
            })
            console.log(this.$route.query.id,"ididid")
          }, */
      //点击四按钮跳转
      classskip(e) {
        this.top=true;
        this.$router.push({ name: "Classify", query: { id: e } });
        this.refreshing = true;
        this.page = 1;
        this.onLoad()
      },
      // 
      onLoad() {
        if (this.refreshing) {
          this.list_box = [];
          this.refreshing = false;
        }
        var id = this.$route.query.id;
        var idnumber;
        if (id) {
          idnumber = id;
        } else {
          idnumber = "";
        }
        var allnumber;
        var para = {
          page: this.page,
          goods_category: idnumber
        };
        getData
          .classList(para)
          .then(res => {
            this.opacity = res.data.data.goods_type.diaphaneity /100;
            res.data.data.list.data.map(item => {
              let arr = [];
              for (var i = 0; i < item.goods_relevance.length; i += 3) {
                arr.push(item.goods_relevance.slice(i, i + 3));
                this.$set(item, "goods_relevance2", arr);
              }
            });
            this.typeInfo = res.data.data.goods_type;
            ///console.log(allnumber,"总量")
            this.list_box.push(...res.data.data.list.data);
            //console.log(this.list_box,3636);
            this.page++;
            this.loading = false;
            // console.log(res, this.page, "下拉刷新的");
            if (this.list_box.length >= res.data.data.list.total) {
              this.finished = true;
            }
          })
          .catch(err => { });
      },

      // 加载失败调用方法
      onRefresh() {
        console.log("失败了");
        this.finished = false; // 清空列表数据
        this.loading = true; // 将 loading 设置为 true，表示处于加载状态
        this.page = 1; // 分页数赋值为1
        this.list_box = []; // 清空数组
        this.onLoad(); // 重新加载数据
      },

      navto(a) {
        this.$router.push("/goods?id=" + a);
      }
    }
  };
</script>